<template>
	<div>
		<!-- 头部logo -->
		<!--<div class="head-title">
			<p class="homeTitle">中信直播</p>
			<div class="title-en">
				<p class="l-en">CCB</p>
				<p class="r-en">LIVE</p>
			</div>
		</div>-->
		<div class="home-banner" v-if="banner.length>0">
			<swiper :options="swiperOption" class="sw">
				<swiper-slide v-for="(v,index) in banner" :key="index">
					<img :src="v.coverImagUrl+'?x-oss-process=image/resize,m_fixed,h_236,w_750'" @click="clickBannerImg(v.type,v.imagUrl,v.link,v.id)" />
				</swiper-slide>
				<div v-if="banner.length>1" class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>
<script>
	export default {
		components: {

		},
		props: {
			bannerType: String
		},
		data() {
			return {
				banner: [],
				type:'',//banner请求接口类型 类型首页1，专辑管理：2
				onlyChannel: this.$channel,
				swiperOption: {
					autoplay: {
						delay: 5000,
						stopOnLastSlide: false,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination',
					},
				}
			};
		},
		computed: {
			sysInfo() {
				return this.$store.state.SysOrgInfo;
			}
		},
		created() {
			//类型首页1，专辑管理：2
			if(this.bannerType=='album'){//banner为 专辑类型
				this.type = '2'
			}else{
				this.type = '1'
			}
			this.getBanner();
		},

		methods: {
			//获取banner
			getBanner() {
				this.$http.get("/h5live/getAdList?type="+this.type).then(res => {
						if(res.data.code == "000000") {
							if(res.data.data) {
								this.banner = res.data.data;
							}
						}
					})
					.catch(response => {

					});
			},
			//banner 跳转
			clickBannerImg(type, imgLink, urlLink, id) { //banner 的id  	
				fun.dotNum("homeBanner" + id)
				switch(type) {
					case 1:
						this.$store.dispatch("dispatchBannerImgLink", imgLink)
						this.$router.push(`/${this.$channel}/bannerLink`);
						break;
					case 2:
						window.location.href = urlLink
						break;
					default:
						break;
				}
			}
		},
	}
</script>
<style scoped>
	/* 头部 */
	
	.head-title {
		padding: 20px 0;
		width: 100vw;
	}
	
	.homeTitle {
		font-size: 36px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(225, 45, 54, 1);
		text-align: center;
		margin-bottom: 6px;
	}
	
	.title-en {
		display: flex;
		display: -webkit-flex;
		width: 141px;
		margin: 0 auto;
		justify-content: space-between;
	}
	
	.title-en p {
		font-size: 24px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(225, 45, 54, 1);
		letter-spacing: 2px;
		margin-right: -4px;
	}
	
	.h-banner {
		width: 100%;
		height: 328px;
	}
	
	.cube-slide-item .h-banner-img img {
		width: 100%;
		height: 318px;
	}
	
	.h-ing-title {
		padding: 5px 30px 15px 30px;
		display: flex;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3px 9px 1px rgba(204, 151, 152, 0.1);
		align-items: center;
	}
	
	.h-ing-title img {
		width: 70px;
		height: 70px;
	}
	
	.h-i-info {
		margin-left: 24px;
	}
	
	.info-name {
		font-size: 22px;
		/* margin-bottom: 12px;
  margin-top: 6px; */
		font-weight: bold;
	}
	
	.info-nowPageNum {
		font-size: 20px;
	}
	
	.h-banner .cube-slide-dots>span {
		margin: 0 2px;
		width: 28px;
		height: 3px;
	}
	
	.home-banner {
		position: relative;
	}
	
	.home-banner a {
		width: 100%;
		display: inline-block;
	}
	
	.home-banner img {
		width: 100%;
		height: 236px;
	}
	
	.sw {
		height: 236px;
	}
	
	.swiper-pagination.swiper-pagination-bullets {
		text-align: right;
		left: -50px;
	}
</style>